/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      today_details
 * @Description:    点击详情页面
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/5 9:56 上午
 * @UpdateDate:     2021/3/5 9:56 上午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import React, { useEffect } from 'react';
import { GetArticleStatisticsDetailsApi } from '@/service/statistics_api';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { ArticleListItemType } from '@/type/article_type';
import { message, Tag } from 'antd';
import { rgbaColorByString } from '@/utils/app_fun';
import { AppImageUrl } from '@/config/app_config';
import {
  ArticleStatisticsItemType,
  ArticleStatisticsListType,
} from '@/type/statistics_type';
import { SortOrder } from 'antd/lib/table/interface';
import { ArticleListByAdminApi } from '@/service/article_api';
import { updateCategoryApi } from '@/service/category_api';
import { IRouteComponentProps } from 'umi';

const columns: ProColumns<ArticleStatisticsItemType>[] = [
  {
    title: '文章id',
    dataIndex: 'id',
    key: 'id',
    search: false,
    editable: false,
  },
  {
    title: '阅读次数',
    dataIndex: 'today_num',
    search: false,
    render: (dom, item) => {
      return <Tag color="red">{item.today_num}</Tag>;
    },
  },
  {
    title: '总阅读次数',
    dataIndex: 'article_read',
    search: false,
    render: (dom, item) => {
      return <Tag color="blue">{item.article_read}</Tag>;
    },
  },
  {
    title: '文章名称',
    dataIndex: 'article_title',
    render: (dom, item) => {
      return <h4>{item.article_title}</h4>;
    },
  },
  {
    title: '文章分类',
    dataIndex: 'articleCategory',
    render: (dom, item) => {
      return <Tag color="volcano">{item.articleCategory.category_name}</Tag>;
    },
  },
  {
    title: '文章标签',
    dataIndex: 'articleTag',
    render: (dom, item) => {
      const Tags = item.articleTag.map((tag) => {
        return (
          <Tag key={tag.id} color={rgbaColorByString(tag.tag_color)}>
            {tag.tag_name}
          </Tag>
        );
      });
      return Tags;
    },
  },
];

export default (props: IRouteComponentProps<{}, { id: string }>) => {
  const getMenuList = async (
    params: {
      pageSize?: number;
      current?: number;
      keyword?: string;
    },
    sort: {
      [key: string]: SortOrder;
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) => {
    const model = await GetArticleStatisticsDetailsApi({
      page: params.current ?? 1,
      limit: params.pageSize ?? 10,
      id: Number(props.location.query.id),
    });
    if (model.success) {
      return {
        success: true,
        data: model.data!.data.lists,
        total: model.data!.data.total,
      };
    }
    return {
      data: [],
      success: false,
    };
  };

  return (
    <ProTable<ArticleStatisticsItemType>
      columns={columns}
      rowKey="id"
      request={getMenuList}
      pagination={{ pageSize: 20 }}
    />
  );
};
